<template>
	<div>
		<div style="line-height: 40px">{{mapI18n('dataModel','数据模型')}}</div>
		<rx-input-button :showClose="false" :placeholder="mapI18n('selectModel','请选择数据模型')"
                         optionLabel="text" :singleValue="false"
                         style="width:100%" v-model="dataModelObj" @btnClick="openDataModelDialog"></rx-input-button>
		<div v-if="!hideDimensions">
			<a-collapse :bordered="false" default-active-key="1"
						v-for="(dimension,index) in modelConfig.dimensions" :key="index">
				<template #expandIcon="props">
                    <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
				</template>
				<a-collapse-panel key="1" :header="dimension.tableName">
					<vuedraggable v-model="dimension.fields" animation="300"
                                  itemKey="fieldName"
								  dragClass="dragClass" ghostClass="ghostClass"
								  chosenClass="chosenClass"
								  :group="{name:groupName?groupName:'site',pull:'clone',put:'false'}"
								  @start="dimensionStart(index)" @end="dimensionEnd">
                        <template #item="{ element:item }">
							<div class="data-model-list" v-if="!item.hide" :key="item.fieldName">
                                <rx-icon-show :icon="getIcon(item)" style="color:#02c5b7"></rx-icon-show>
								<div :title="item.fieldLabel" class="data-model-span">{{ item.fieldLabel }}</div>
							</div>
						</template>
					</vuedraggable>
				</a-collapse-panel>
			</a-collapse>
		</div>
		<div class="hinder">
			<a-collapse :bordered="false" default-active-key="1"
						v-for="(measure,index) in modelConfig.measures" :key="index">
				<template #expandIcon="props">
                    <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
				</template>
				<a-collapse-panel key="1" :header="measure.tableName">
					<vuedraggable v-model="measure.fields" animation="300"
								  dragClass="dragClass_du" ghostClass="ghostClass"
								  chosenClass="chosenClass"
								  :group="{name: groupName?groupName:'measure',pull:'clone',put:'false'}"
                                  itemKey="fieldName"
								  @start="measureStart(index)" @end="measureEnd">
                        <template #item="{ element:item }">
                            <div class="data-model-to" v-if="!item.hide"  :key="item.fieldName">
                                <rx-icon-show :icon="getIcon(item)" style="color:#9babed"></rx-icon-show>
                                <div :title="item.fieldLabel" class="data-model-span"> {{ item.fieldLabel }}</div>
                            </div>
                        </template>
					</vuedraggable>
				</a-collapse-panel>
			</a-collapse>
		</div>
	</div>
</template>

<script>
import {RxInputButton, Util} from '@lowcode/jpaas-base-lib'
import vuedraggable from "vuedraggable";
import ScreenDataModelDialog from "@/views/modules/design/dialog/screen-data-model-dialog.vue";
export default {
	name: "DataModel",
	props:["dataModel","config","modelConfig","getDataModel","dimensionStart","dimensionEnd","measureStart","measureEnd","groupName","hideDimensions"],
	components:{
		vuedraggable,
		RxInputButton
	},
	data() {
		return {
			dataModelObj:""
		}
	},
	created() {
		if(this.dataModel){
			this.dataModelObj=this.dataModel;
		}
	},
	methods: {
		mapI18n(name, text, key) {
			return this.$ti18(name, text, "mapLang", key);
		},
		//选择数据模型
		openDataModelDialog(vm) {
			let self = this;
			Util.open({
				component: ScreenDataModelDialog,
				curVm: this,
				widthHeight: ['1024px', '550px'],
				title: this.mapI18n('dataModel','数据模型'),
				zIndex: 999
			}, function (action, data) {
				if (action != 'ok') return;
				self.config.dataSources.dataModel = data.id;
				self.config.dataSources.dataModelName = data.name;
				self.config.dataSources.sourceType = data.sourceType || "dataSource";
				self.getDataModel(data.id,true);
			});
		},
        //图标
        getIcon(obj) {
            if (obj.dataType == 'string') {
                return 'icon-lineField-String';
            } else if (obj.dataType == 'date') {
                return 'icon-lineriqi2';
            } else  {
                return 'icon-lineshuzi';
            }
        },
	},
	watch: {
		dataModel:function (val){
			if(val){
				this.dataModelObj=val;
			}
		}
	}
}
</script>

<style scoped>
.data-model-list,.data-model-to{
  height: 30px;
  line-height: 30px;
  padding-left: 14px;
  cursor: pointer;
	display: flex;

}
.data-model-span{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left: 10px;
}
.data-model-list:hover{
  background-color: #dafaf8;
  border-radius: 2px;
}
.data-model-to:hover{
  background-color: #e5eaff;
  border-radius: 2px;
}
</style>
